import './imports';

import Header from '../components/Header';
import NavBar from '../components/NavBar';
import NewsList from '../components/NewsList';
import { NEWS_TYPE } from '../data';
import service from '../service';

;(function (doc) {
  // 根元素
  const oApp = doc.querySelector('#app');
  // 配置数据
  const config = {
    // 类型
    type: 'top',
    // 每页显示的数据
    count: 10,
    // 当前页
    pageNum: 0
  }
  // 新闻数据
  let newsData = {};
  // 
  let oListWrapper = '';
  // 初始化方法
  const init = async () => {
    render();
    await setNewsList();
    bindEvent();
  }
  // 模板渲染
  function render () {
    // 头部
    const headerTpl = Header.tpl({
      url: '/',
      title: '新闻头条',
      showLeftIcon: false,
      showRightIcon: true
    })
    // nav
    const navBarTpl = NavBar.tpl(NEWS_TYPE);
    const listWrapperTpl = NewsList.wrapperTpl(82);
    // 设置元素
    oApp.innerHTML += (headerTpl + navBarTpl + listWrapperTpl);
    oListWrapper = oApp.querySelector('.news-list');
  }
  // 绑定事件
  function bindEvent () {
    NavBar.bindEvent(setType);
  }
  // 改变数据
  function setType (type) {
    config.type = type;
  }
  function renderList (data) {
    const { pageNum } = config;
    const newsListTpl = NewsList.tpl({
      data,
      pageNum
    });
    oListWrapper.innerHTML = newsListTpl;
    NewsList.imgShow();
  }
  // 获取所有数据
  async function setNewsList () {
    const { type, count, pageNum } = config;
    if (newsData[type]) {
      return;
    }
    newsData[type] = await service.getNewsList(type, count);
    renderList(newsData[type][pageNum]);
  }

  init();
})(document);
